<template>
  <div class="activity-admin">
    <ul class="menu">
      <li :class="['content', menuActive == index ? 'active-content' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(index)">
        {{ item }}
      </li>
    </ul>
    <MyHeader>
      <div slot="title">博文广记</div>
    </MyHeader>
    <div class="essay-upload-box" v-show="menuActive == 1">
      <div class="activity-list">
        <div class="upload-icon">
          <div class="box" @click="goUpload">
            <img src="@/static/img/editPersonalHome/upload_icon.png" alt="" />
          </div>
          <!-- <div class="btn">
            <div class="share" @click="goUpload">上传作品</div>
          </div> -->
        </div>
        <div class="video-info" v-for="(item, index) in activityList" @mouseleave="handleMouseLeave" @mouseenter="handleMouseEnter(item.data_id)">
          <div v-show="enterEssay === item.data_id" class="mark all-center">
            <i class="el-icon-edit" @click.stop="goEdit(item.data_id)" style="font-size: 32px;margin-right: 15px;"></i>
            <i class="el-icon-delete" @click.stop="deleteEssay(item.data_id)" style="font-size: 32px;margin-right: 15px;"></i>
          </div>
          <div class="box">
            <el-image
              fit="cover"
              :src="item.show_url_list[0]"
              alt=""
            >
            <div slot="error" class="image-slot all-center">
              暂无图片
            </div>
          </el-image>
          </div>
          <div class="info">
            <div class="activity-title" :title="item.name">
              {{ item.title }}
            </div>
            <div class="time">
              {{ item.read_count + '人阅读' }}
            </div>
            <div class="collect">
              {{ item.create_time }}
            </div>
          </div>
        </div>
      </div>
      <Pagin
        ref="page"
        v-show="activityList.length !== 0"
        :func="getDataList"
        :pagesSizes="[10, 20, 30, 50]"
        :sizeNum="10"
        :layout="'prev, pager, next'"
        :background="true"
        :position="'center'"
        class="pagin"
      ></Pagin>
    </div>
    <div class="upload-essay" v-show="menuActive == 0">
      <UploadEssay @clearId="clearId" ref="essay" :menuActive="menuActive" :data_id="data_id" />
    </div>
  </div>
</template>

<script>
import Pagin from "@/components/pagin.vue";
import MyHeader from "./common/myHeader.vue";
import UploadEssay from "../uploadEssay";

export default {
  name: "",
  middleware: 'identityInfo',
  components: {
    Pagin,
    MyHeader,
    UploadEssay
  },
  props: {},
  data() {
    return {
      data_id: '',
      activityList: [],
      menuActive: 0,
      menuList: [
        '新文章上传',
        '文章管理'
      ],
      enterEssay: ''
    };
  },
  computed: {},
  watch: {

  },
  created() {},
  mounted() {
    this.$refs.page.refresh();
  },
  methods: {
    handleMenu(index) {
      this.menuActive = index
      if (index == 1) {
        this.$refs.page.refresh();
      } else {
        this.data_id = ''
      }
    },
    handleMouseEnter(id) {
      this.enterEssay = id
    },
    handleMouseLeave() {
      this.enterEssay = ''
    },
    deleteEssay(data_id) {
      this.$api.deleteEssay({data_id}, { }).then(res => {
        if (res.status === '$SUCCESS') {
          this.$message.success('删除成功')
          this.$refs.page.refresh();
        }
      })
    },
    goUpload() {
      // this.$router.push("/editPersonalHome/uploadWorks");
      // this.$emit('changeTab')
      this.menuActive = 0
      this.data_id = ''
    },
    clearId(type) {
      this.data_id = ''
      if (!type) {
        this.handleMenu(1)
      }
    },
    goEdit(data_id) {
      this.menuActive = 0
      this.data_id = data_id
    },
    getDataList(page, page_size, callback) {
      const params = {
        page_num: page,
        page_count: page_size,
        userid: this.$store.state.user.info?.user_info?.data_id
      }
      this.$api.getEssay(params).then((res) => {
        this.activityList = res.result.item_list;
        callback(this.activityList, res.result.total_count);
      });
    },
  },
};
</script>

<style scoped lang="less">
.activity-admin {
  .menu {
    height: 100%;
    margin-right: 90px;
    margin-bottom: 50px;
    margin: 0 90px 50px 100px;

    .content {
      // width: 150px;
      line-height: 24px;
      margin-right: 80px;
      display: inline-block;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      list-style-type: none;

      &.active-content {
        color: #000;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .pagin {
    background: #fff;
    padding-bottom: 40px;
  }

  .activity-list {
    background: #fff;
    padding: 40px 47px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .upload-icon {
      height: 344px;
      margin-bottom: 41px;
      display: inline-block;

      .box {
        width: 490px;
        height: 290px;
        background: #f3f4f4;
        border: 0;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        img {
          width: 56px;
          height: 56px;
        }
      }

      .btn {
        margin-top: 87px;
      }
    }

    .video-info {
      margin-bottom: 41px;
      display: inline-block;
      position: relative;

      .mark {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 290px;
        background-color: #000;
        opacity: 0.6;
        z-index: 999;

        .el-icon-edit,
        .el-icon-delete {
          cursor: pointer;
        }
      }

      .box {
        width: 490px;
        height: 290px;
        background: #f3f4f4;
        cursor: pointer;

        ::v-deep(.el-image) {
          width: 100%;
          height: 100%;

          .image-slot {
            width: 100%;
            height: 100%;
          }
        }
      }

      .info {
        color: #999;
        font-size: 16px;
        margin-top: 13px;

        .activity-title {
          width: 490px;
          font-weight: 600;
          color: #000;
          margin-bottom: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .time {
          display: inline-block;
        }

        .collect {
          float: right;
          p {
            display: inline-block;
            margin-right: 20px;
            img {
              vertical-align: top;
            }
          }
        }
      }
    }

    // .upload-icon {
    //   .box {
    //     border: 1px solid #ccc;
    //   }
    // }
  }
}
</style>
